<template>
  <!-- 侧边栏的实现 -->
  <div class="side-menu" @click.stop>
    <!-- 头像、用户名和信用等级实现 -->
    <div class="user-info">
      <img :src="userAvatar" class="avatar" />
      <div class="username">{{ username }}</div>
      <div class="rating">
        <!-- 根据 rate 动态生成星星 -->
        <span v-for="n in 5" :key="n" :class="['star', n <= rate ? 'yellow' : 'black']">★</span>
      </div>
    </div>
    
    <div class="menu-items">
      <div v-for="item in menuItems" :key="item.id" class="menu-item" @click="navigate(item.route)">
        <img :src="item.icon" class="icon" alt="icon" />
        <div class="label-container">
          <span class="label">{{ item.label }}</span>
          <span class="en-label">{{ item.enLabel }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// 单独导入每个图标
import userAvatarIcon from '../assets/1.svg';
import walletIcon from '../assets/icons/wallet.svg';
import receiveIcon from '../assets/icons/receive.svg';
import sendPackageIcon from '../assets/icons/send-package.svg';
import basicDetailIcon from '../assets/icons/basic-detail.svg';
import settingIcon from '../assets/icons/setting.svg';

// 用户信息
const username = ref('小鞠知花');
const userAvatar = userAvatarIcon;
const rate = ref(3);  
const menuItems = ref([
  { 
    id: 1, 
    icon: walletIcon, 
    label: '我的钱包',
    enLabel: 'my wallet',
    route: 'Wallet'
  },
  { 
    id: 2, 
    icon: receiveIcon, 
    label: '委托历史',
    enLabel: 'published task history',
    route: 'Receive'
  },
  { 
    id: 3, 
    icon: sendPackageIcon, 
    label: '代取记录',
    enLabel: 'received task history',
    route: 'SendPackage'
  },
  { 
    id: 4, 
    icon: basicDetailIcon, 
    label: '个人信息',
    enLabel: 'personal information',
    route: 'BasicDetail'
  },
  { 
    id: 5, 
    icon: settingIcon, 
    label: '设置',
    enLabel: 'setting',
    route: 'Setting'
  }
]);

const router = useRouter();
function navigate(route) {
  router.push(route);
}
</script>


<style scoped>
.side-menu {
border-radius: 0 40px 40px 0;  /* 右上和右下角的圆角 */
position: fixed;
top: 0;
left: 0;
width: 70%;
max-width: 300px;  /* 最大宽度为300px */
height: 100vh;  /* 满屏高度 */
background: linear-gradient(to right, rgba(183, 205, 235, 0.8), rgba(209, 227, 241, 0.8));  /* 从左到右的渐变色，添加透明度 */
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
overflow: hidden;  /* 确保圆角不被超出内容遮挡 */
}

.menu-items {
  padding: 16px; 
  max-height: calc(100vh - 32px); 
  overflow-y: auto;  /* 添加滚动条以适应内容 */
}

.user-info {
  padding: 32px; /* 将2rem替换为32px */
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 16px; /* 将1rem替换为16px */
}

.username {
  font-size: 1.2rem;
  margin-bottom: 8px; /* 将0.5rem替换为8px */
  color: #000;
  font-weight: bold;
}

.rating {
  margin-left: 30px;
  background-color: #eaf1f9;
  width: 160px;
  display: flex;
  justify-content: center; /* Center the stars */
  align-items: center; /* Center the stars vertically */
  border-radius: 20px;
}

.star {
  font-size: 24px; /* 星星大小 */
  margin: 0 8px; /* 将0 5px替换为0 8px */
}

.yellow {
  color: #ffd700; /* 黄色 */
}

.black {
  color: #000000; /* 黑色 */
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px; /* 将1rem替换为16px */
  gap: 16px; /* 将1rem替换为16px */
  cursor: pointer;
  background-color: #ebf2fa;
  border-radius: 60px;
  margin-bottom: 16px; /* 将1rem替换为16px */
}

.label-container {
  display: flex;
  flex-direction: column;
}

.label {
  font-weight: bold;
  font-size: 16px;
  color: #54595f;
  margin-left: 16px; /* 将10px替换为16px */
}

.en-label {
  font-size: 12px;
  color: #b7bbbe;
  margin-left: 16px; /* 将10px替换为16px */
}

.icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-left: 16px; /* 将10px替换为16px */
}
</style>